<template>
    <div class="person">
        <el-card style="max-width: 480px">
          <el-form
            label-width="auto"
            :model="formModel"
            style="max-width: 600px"
          >
            <el-form-item label="头像" :prop="img">
              <!-- <div class="img">
                <img src="../../assets/images/avatar.png" alt="">
              </div> -->
              <el-upload
                  ref="uploadRef"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="handleUpload"
              >
                  <img v-if="formModel.img" :src="formModel.img" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名" :prop="username">
              <el-input v-model="formModel.username" />
            </el-form-item>
            <el-form-item label="手机号" :prop="phone">
              <el-input v-model="formModel.phone" />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary"  @click="submit">保存</el-button>
          </div>

        </el-card>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { Plus } from '@element-plus/icons-vue'

const uploadRef=ref()
const formModel=ref({
    img:'',
    username:'',
    phone:''
})

// 获取图片地址
const handleUpload=(file)=>{
    console.log(file.raw)
    const reader=new FileReader()
    reader.readAsDataURL(file.raw)
    reader.onload=()=>{
      formModel.value.img = reader.result;
    }
}

// 从store获取过来


</script>

<style lang='scss' scoped>
.person{
    .img{
        width: 100px;
        height: 100px;
        border: 1px solid #e6e4e4;
        border-radius: 5px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .btn{
        display: flex;
        justify-content: flex-end;
    }
    .avatar-uploader {
      :deep() {
        .avatar {
          width: 120px;
          height: 120px;
          display: block;
        }
        .el-upload {
          border: 1px dashed var(--el-border-color);
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: var(--el-transition-duration-fast);
        }
        .el-upload:hover {
          border-color: var(--el-color-primary);
        }
        .el-icon.avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 120px;
          height: 120px;
          text-align: center;
        }
      }
    }
}
</style>